-
Notifications
You must be signed in to change notification settings - Fork 0
/
code.js
58 lines (49 loc) · 1.5 KB
/
code.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
// Noise tends to look smoother with coordinates that are very close together
// These values will be multiplied by the x and y coordinates to make the
// resulting values very close together
let xScale = 0.015;
let yScale = 0.02;
let gapSlider;
let gap;
let offsetSlider;
let offset;
function setup() {
createCanvas(400, 400);
// Set up the sliders
gapSlider = createSlider(2, width / 10, width / 20);
gapSlider.changed(dotGrid);
gapSlider.mouseMoved(checkChanged);
offsetSlider = createSlider(0, 1000, 0);
offsetSlider.mouseMoved(checkChanged);
// Draw the grid
dotGrid();
}
// When the mouse is moved over a slider
// Draw the dot grid if something has changed
function checkChanged() {
if (gap !== gapSlider.value()) {
dotGrid();
}
if (offset !== offsetSlider.value()) {
dotGrid();
}
}
function dotGrid() {
background(255);
noStroke();
fill(0);
// Get the current gap and offset values from the sliders
gap = gapSlider.value();
offset = offsetSlider.value();
// Loop through x and y coordinates, at increments set by gap
for (let x = gap / 2; x < width; x += gap) {
for (let y = gap / 2; y < height; y += gap) {
// Calculate noise value using scaled and offset coordinates
let noiseValue = noise((x + offset) * xScale, (y + offset) * yScale);
// Since noiseValue will be 0-1, multiply it by gap to set diameter to
// between 0 and the size of the gap between circles
let diameter = noiseValue * gap;
circle(x, y, diameter);
}
}
}